<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常见问题 - IconHunter V2</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#eef2ff',
                            100: '#e0e7ff',
                            200: '#c7d2fe',
                            300: '#a5b4fc',
                            400: '#818cf8',
                            500: '#6366f1',
                            600: '#4f46e5',
                            700: '#4338ca',
                            800: '#3730a3',
                            900: '#312e81'
                        }
                    }
                }
            }
        }
    </script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
        }
        .faq-item.active .faq-answer {
            max-height: 1000px;
            opacity: 1;
            transition: max-height 0.5s ease, opacity 0.3s ease 0.2s;
        }
        .faq-item .faq-answer {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.5s ease, opacity 0.3s ease;
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-md">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <a href="index.html" class="text-2xl font-bold text-primary-600">
                        IconHunter <span class="text-lg text-primary-500">V2</span>
                    </a>
                </div>
                <div class="hidden md:block">
                    <div class="ml-4 flex items-center space-x-4">
                        <a href="index.html" class="text-gray-600 hover:text-primary-600 hover:bg-gray-100 px-3 py-2 rounded-md font-medium">首页</a>
                        <a href="faq.html" class="text-primary-600 font-medium px-3 py-2 rounded-md">常见问题</a>
                        <a href="contact.html" class="text-gray-600 hover:text-primary-600 hover:bg-gray-100 px-3 py-2 rounded-md font-medium">联系我们</a>
                        <a href="privacy.html" class="text-gray-600 hover:text-primary-600 hover:bg-gray-100 px-3 py-2 rounded-md font-medium">隐私政策</a>
                        <a href="terms.html" class="text-gray-600 hover:text-primary-600 hover:bg-gray-100 px-3 py-2 rounded-md font-medium">使用条款</a>
                    </div>
                </div>
                <div class="md:hidden">
                    <button type="button" class="text-gray-600 hover:text-primary-600 focus:outline-none">
                        <i class="fa-solid fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- 头部区域 -->
    <div class="gradient-bg py-12 text-white">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h1 class="text-3xl font-bold mb-2">常见问题</h1>
            <p class="text-xl max-w-2xl mx-auto">查找有关IconHunter V2的常见问题解答</p>
        </div>
    </div>

    <!-- 主要内容 -->
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <!-- 搜索框 -->
        <div class="mb-10">
            <div class="relative">
                <input type="text" class="w-full py-3 px-4 pl-12 rounded-xl border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-300 focus:border-primary-500 shadow-sm" placeholder="搜索常见问题...">
                <i class="fa-solid fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>
        </div>

        <!-- FAQ分类 -->
        <div class="mb-8 flex flex-wrap gap-2">
            <button class="bg-primary-500 text-white px-4 py-2 rounded-lg font-medium">全部</button>
            <button class="bg-white text-gray-700 px-4 py-2 rounded-lg font-medium border border-gray-200 hover:bg-gray-50">基本使用</button>
            <button class="bg-white text-gray-700 px-4 py-2 rounded-lg font-medium border border-gray-200 hover:bg-gray-50">账户与订阅</button>
            <button class="bg-white text-gray-700 px-4 py-2 rounded-lg font-medium border border-gray-200 hover:bg-gray-50">下载问题</button>
            <button class="bg-white text-gray-700 px-4 py-2 rounded-lg font-medium border border-gray-200 hover:bg-gray-50">技术支持</button>
        </div>

        <!-- FAQ列表 -->
        <div class="space-y-4 mb-12">
            <!-- FAQ项 1 -->
            <div class="faq-item active bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200">
                <button class="faq-toggle w-full px-6 py-4 text-left font-medium flex justify-between items-center focus:outline-none">
                    <span>什么是IconHunter V2？</span>
                    <i class="fa-solid fa-chevron-down text-primary-500 transform transition-transform duration-300 rotate-180"></i>
                </button>
                <div class="faq-answer px-6 pb-4">
                    <p class="text-gray-600">
                        IconHunter V2是一款专业的图标搜索和下载工具，提供卡通治愈风格的用户界面。它帮助设计师、开发者和普通用户轻松找到并下载各种平台的精美应用图标，支持多种尺寸和格式。
                    </p>
                </div>
            </div>

            <!-- FAQ项 2 -->
            <div class="faq-item bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200">
                <button class="faq-toggle w-full px-6 py-4 text-left font-medium flex justify-between items-center focus:outline-none">
                    <span>IconHunter V2支持哪些平台的图标？</span>
                    <i class="fa-solid fa-chevron-down text-primary-500 transform transition-transform duration-300"></i>
                </button>
                <div class="faq-answer px-6 pb-4">
                    <p class="text-gray-600">
                        IconHunter V2支持多种平台的图标，包括：
                    </p>
                    <ul class="list-disc pl-6 mt-2 text-gray-600">
                        <li>iOS应用图标</li>
                        <li>Android应用图标</li>
                        <li>macOS应用图标</li>
                        <li>Windows应用图标</li>
                        <li>网页图标（Favicon）</li>
                    </ul>
                </div>
            </div>

            <!-- FAQ项 3 -->
            <div class="faq-item bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200">
                <button class="faq-toggle w-full px-6 py-4 text-left font-medium flex justify-between items-center focus:outline-none">
                    <span>如何搜索图标？</span>
                    <i class="fa-solid fa-chevron-down text-primary-500 transform transition-transform duration-300"></i>
                </button>
                <div class="faq-answer px-6 pb-4">
                    <p class="text-gray-600">
                        搜索图标非常简单：
                    </p>
                    <ol class="list-decimal pl-6 mt-2 text-gray-600">
                        <li>打开IconHunter V2应用</li>
                        <li>在首页顶部的搜索框中输入应用名称或关键词</li>
                        <li>点击搜索按钮或按下回车键</li>
                        <li>浏览搜索结果并找到您需要的图标</li>
                    </ol>
                    <p class="mt-2 text-gray-600">
                        您还可以使用分类筛选器来缩小搜索范围，例如按平台（iOS、Android等）或类型进行筛选。
                    </p>
                </div>
            </div>

            <!-- FAQ项 4 -->
            <div class="faq-item bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200">
                <button class="faq-toggle w-full px-6 py-4 text-left font-medium flex justify-between items-center focus:outline-none">
                    <span>IconHunter V2支持哪些图标格式？</span>
                    <i class="fa-solid fa-chevron-down text-primary-500 transform transition-transform duration-300"></i>
                </button>
                <div class="faq-answer px-6 pb-4">
                    <p class="text-gray-600">
                        IconHunter V2支持多种图标格式，包括：
                    </p>
                    <ul class="list-disc pl-6 mt-2 text-gray-600">
                        <li>PNG（透明背景）</li>
                        <li>SVG（矢量格式）</li>
                        <li>ICO（Windows图标）</li>
                        <li>ICNS（macOS图标）</li>
                    </ul>
                    <p class="mt-2 text-gray-600">
                        您可以根据自己的需求选择最适合的格式下载。
                    </p>
                </div>
            </div>

            <!-- FAQ项 5 -->
            <div class="faq-item bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200">
                <button class="faq-toggle w-full px-6 py-4 text-left font-medium flex justify-between items-center focus:outline-none">
                    <span>如何下载图标？</span>
                    <i class="fa-solid fa-chevron-down text-primary-500 transform transition-transform duration-300"></i>
                </button>
                <div class="faq-answer px-6 pb-4">
                    <p class="text-gray-600">
                        下载图标的步骤如下：
                    </p>
                    <ol class="list-decimal pl-6 mt-2 text-gray-600">
                        <li>搜索并找到您想要的应用图标</li>
                        <li>点击图标进入详情页面</li>
                        <li>在详情页面，您可以看到不同尺寸的图标预览</li>
                        <li>选择您需要的尺寸和格式</li>
                        <li>点击"下载"按钮</li>
                        <li>图标将保存到您设备的"下载"文件夹或您在设置中指定的位置</li>
                    </ol>
                    <p class="mt-2 text-gray-600">
                        您也可以使用"下载所有尺寸"按钮，将所有尺寸的图标打包成ZIP文件一次性下载。
                    </p>
                </div>
            </div>

            <!-- FAQ项 6 -->
            <div class="faq-item bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200">
                <button class="faq-toggle w-full px-6 py-4 text-left font-medium flex justify-between items-center focus:outline-none">
                    <span>是否需要付费才能使用IconHunter V2？</span>
                    <i class="fa-solid fa-chevron-down text-primary-500 transform transition-transform duration-300"></i>
                </button>
                <div class="faq-answer px-6 pb-4">
                    <p class="text-gray-600">
                        IconHunter V2采用免费增值模式：
                    </p>
                    <ul class="list-disc pl-6 mt-2 text-gray-600">
                        <li><strong>免费版</strong>：允许用户每天下载有限数量的图标，并提供基本功能</li>
                        <li><strong>Pro版</strong>：提供无限下载、更多高级功能（如批量导出、无水印下载）、优先访问新图标等</li>
                    </ul>
                    <p class="mt-2 text-gray-600">
                        您可以在应用内购买Pro版订阅，支持月度或年度付费方式，我们也提供7天免费试用期。
                    </p>
                </div>
            </div>

            <!-- FAQ项 7 -->
            <div class="faq-item bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200">
                <button class="faq-toggle w-full px-6 py-4 text-left font-medium flex justify-between items-center focus:outline-none">
                    <span>如何管理我的下载历史？</span>
                    <i class="fa-solid fa-chevron-down text-primary-500 transform transition-transform duration-300"></i>
                </button>
                <div class="faq-answer px-6 pb-4">
                    <p class="text-gray-600">
                        管理下载历史的方法：
                    </p>
                    <ol class="list-decimal pl-6 mt-2 text-gray-600">
                        <li>在应用底部导航栏中点击"历史"图标</li>
                        <li>您将看到按时间排序的所有下载记录</li>
                        <li>点击历史记录中的任何图标可以快速重新下载</li>
                        <li>点击右上角的"编辑"按钮可以删除历史记录</li>
                        <li>您可以使用顶部的筛选器按平台或时间范围筛选历史记录</li>
                    </ol>
                </div>
            </div>

            <!-- FAQ项 8 -->
            <div class="faq-item bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200">
                <button class="faq-toggle w-full px-6 py-4 text-left font-medium flex justify-between items-center focus:outline-none">
                    <span>如何更改应用设置？</span>
                    <i class="fa-solid fa-chevron-down text-primary-500 transform transition-transform duration-300"></i>
                </button>
                <div class="faq-answer px-6 pb-4">
                    <p class="text-gray-600">
                        更改应用设置的步骤：
                    </p>
                    <ol class="list-decimal pl-6 mt-2 text-gray-600">
                        <li>在应用底部导航栏中点击"设置"图标</li>
                        <li>在设置页面，您可以调整以下选项：</li>
                        <ul class="list-disc pl-6 mt-1 text-gray-600">
                            <li>深色/浅色模式切换</li>
                            <li>卡通主题开关</li>
                            <li>默认下载路径</li>
                            <li>默认图像格式</li>
                            <li>自动清理缓存</li>
                            <li>通知设置</li>
                        </ul>
                    </ol>
                    <p class="mt-2 text-gray-600">
                        所有设置会立即生效并自动保存。
                    </p>
                </div>
            </div>

            <!-- FAQ项 9 -->
            <div class="faq-item bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200">
                <button class="faq-toggle w-full px-6 py-4 text-left font-medium flex justify-between items-center focus:outline-none">
                    <span>遇到下载问题怎么办？</span>
                    <i class="fa-solid fa-chevron-down text-primary-500 transform transition-transform duration-300"></i>
                </button>
                <div class="faq-answer px-6 pb-4">
                    <p class="text-gray-600">
                        如果您在下载图标时遇到问题，请尝试以下解决方案：
                    </p>
                    <ul class="list-disc pl-6 mt-2 text-gray-600">
                        <li>检查您的网络连接是否稳定</li>
                        <li>确认您的设备有足够的存储空间</li>
                        <li>尝试关闭并重新打开应用</li>
                        <li>检查是否有应用更新可用</li>
                        <li>尝试不同的图标尺寸或格式</li>
                        <li>清除应用缓存（在设置页面中）</li>
                    </ul>
                    <p class="mt-2 text-gray-600">
                        如果问题仍然存在，请通过"设置">"关于">"问题反馈"向我们报告问题。
                    </p>
                </div>
            </div>

            <!-- FAQ项 10 -->
            <div class="faq-item bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200">
                <button class="faq-toggle w-full px-6 py-4 text-left font-medium flex justify-between items-center focus:outline-none">
                    <span>如何取消Pro版订阅？</span>
                    <i class="fa-solid fa-chevron-down text-primary-500 transform transition-transform duration-300"></i>
                </button>
                <div class="faq-answer px-6 pb-4">
                    <p class="text-gray-600">
                        取消Pro版订阅的步骤：
                    </p>
                    <ol class="list-decimal pl-6 mt-2 text-gray-600">
                        <li>打开设备上的App Store</li>
                        <li>点击右上角的个人头像</li>
                        <li>选择"订阅"</li>
                        <li>找到"IconHunter V2"订阅</li>
                        <li>点击"取消订阅"</li>
                        <li>确认取消</li>
                    </ol>
                    <p class="mt-2 text-gray-600">
                        请注意，取消订阅后，您仍然可以使用Pro功能直到当前订阅期结束。
                    </p>
                </div>
            </div>
        </div>

        <!-- 还有问题？ -->
        <div class="bg-white rounded-xl p-8 shadow-sm border border-gray-200 text-center">
            <h2 class="text-2xl font-bold mb-4">还有其他问题？</h2>
            <p class="text-gray-600 mb-6 max-w-xl mx-auto">
                如果您的问题没有在此处得到解答，请随时联系我们的支持团队，我们很乐意提供帮助。
            </p>
            <a href="contact.html" class="inline-block bg-primary-600 hover:bg-primary-700 text-white font-medium px-6 py-3 rounded-lg shadow-sm transition">
                联系支持团队
            </a>
        </div>
    </div>

    <!-- 底部 -->
    <footer class="bg-white mt-12 border-t border-gray-200">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <div class="grid md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-lg font-semibold mb-4">IconHunter V2</h3>
                    <p class="text-gray-600">寻找最好的应用图标</p>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">支持</h3>
                    <ul class="space-y-2">
                        <li><a href="faq.html" class="text-gray-600 hover:text-primary-600">常见问题</a></li>
                        <li><a href="contact.html" class="text-gray-600 hover:text-primary-600">联系我们</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-primary-600">使用教程</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">法律</h3>
                    <ul class="space-y-2">
                        <li><a href="privacy.html" class="text-gray-600 hover:text-primary-600">隐私政策</a></li>
                        <li><a href="terms.html" class="text-gray-600 hover:text-primary-600">使用条款</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-primary-600">退款政策</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">关注我们</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-600 hover:text-primary-600"><i class="fa-brands fa-twitter text-xl"></i></a>
                        <a href="#" class="text-gray-600 hover:text-primary-600"><i class="fa-brands fa-facebook text-xl"></i></a>
                        <a href="#" class="text-gray-600 hover:text-primary-600"><i class="fa-brands fa-instagram text-xl"></i></a>
                        <a href="#" class="text-gray-600 hover:text-primary-600"><i class="fa-brands fa-github text-xl"></i></a>
                    </div>
                </div>
            </div>
            <div class="mt-8 pt-8 border-t border-gray-200 text-center text-gray-500">
                <p>&copy; 2023 IconHunter. 保留所有权利。</p>
            </div>
        </div>
    </footer>

    <script>
        // FAQ 切换脚本
        document.querySelectorAll('.faq-toggle').forEach(toggle => {
            toggle.addEventListener('click', () => {
                const faqItem = toggle.parentNode;
                const icon = toggle.querySelector('i');
                
                // 切换当前项目的状态
                faqItem.classList.toggle('active');
                
                // 更新图标旋转
                if (faqItem.classList.contains('active')) {
                    icon.classList.add('rotate-180');
                } else {
                    icon.classList.remove('rotate-180');
                }
            });
        });
    </script>
</body>
</html> 